<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		    使用@keyframes创建动画，通过逐步改变一个css样式到另一个样式 
		    @keyframes 定义动画
			animation-name 规定动画名称
			animation-duration 规定动画完成所需的时间
			animation-timing-function 规定动画速度曲线
			animation-delay 规定何时开始
			animation-iteration-count 规定动画播放次数，默认1，infinite无限次
			animation-direction 规定动画正常播放 reverse反向播放
			animation-play-state 规定动画运行或暂停 默认running 暂停paused
		-->
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background-color: orange;
				animation: myAni 5s infinite;
			}

			@keyframes myAni {
				0% {
					background-color: red;
				}
				25% {
					background-color: yellow;
				}
				50% {
					background-color: blue;
				}
				75% {
					background-color: green;
				}
				100% {
					background-color: #5F9EA0;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
